import React, { Component } from 'react';
import {Input,Button,List} from 'antd'
import 'antd/dist/antd.css';
import store from './store'
import {getInputChangeAction,getItemAddAction,getItemDeleteAction} from './store/actionCreators'
class TodoList extends Component {
  constructor(props){
    super(props);
    console.log(store.getState());
    this.state=store.getState();
    this.handleIpnutChange=this.handleIpnutChange.bind(this);
    this.handleBtnClick=this.handleBtnClick.bind(this);
    this.handleStoreChange=this.handleStoreChange.bind(this);
    store.subscribe(this.handleStoreChange)
  }
  render() {
    console.log("render")
    return (
      <div style={{margin:10}}>
        <div>
          <Input 
            value={this.state.inputValue}
            placeholder="todo-item"
            style={{width:300,marginRight:10}}
            onChange={this.handleIpnutChange}
          />
          <Button
            type="primary"
            onClick={this.handleBtnClick}
          >
            提交
          </Button>
        </div>
        <List
          style={{width:300,marginTop:10}}
          bordered
          dataSource={this.state.list}
          renderItem={(item,index) => (<List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>)}
        />
        
      </div>
    )
  }


  handleIpnutChange(e){
    console.log(e.target.value);
    const action=getInputChangeAction(e.target.value)
    store.dispatch(action);
  }

  handleBtnClick(){
    const action = getItemAddAction()
    store.dispatch(action);
  }

  handleItemDelete(index){
    const action= getItemDeleteAction(index)
    store.dispatch(action);
  }
  handleStoreChange(){
    this.setState(store.getState())
  }
  
}

export default TodoList;
